<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块元素</title>
</head>

<body>
    <p>div,h1-h6,p,ul,ol,li等都是块元素</p>
    <ul>
        <li>比较霸道，自己独占一行</li>
        <li>高度、宽度、外边距、内边距都可以控制</li>
        <li>宽度默认是父级的100%</li>
        <li>是一个容器盒子，里面可以放块级元素+行内块元素</li>
        <li>注意点1：文字类的元素内，不能使用块元素</li>
        <li>注意点2：p标签主要存放文字，里面不能出现其他块元素</li>
        <li>注意点3：h1-h6标签主要存放文字，里面也不能出现其他块元素</li>
    </ul>
    <p>a、strong、b、em、i、del、s、ins、u、span等都是行内元素</p>
    <ul>
        <li>相邻的元素在一行，一行可以显示多个</li>
        <li>高度、宽度直接设置无效</li>
        <li>宽度默认是本身内容的宽度</li>
        <li>行内元素只能容纳文本或其他行内元素</li>
        <li>注意点1：链接里面不能再放链接</li>
        <li>注意点2：特殊情况 a里面可以放块元素</li>
        <li>注意点3：h1-h6标签主要存放文字，里面也不能出现其他块元素</li>
    </ul>
    <p>input、img、td等都是行内块元素</p>
    <ul>
        <li>相邻的元素在一行，一行可以显示多个</li>
        <li>高度、宽度直接设置无效</li>
        <li>宽度默认是本身内容的宽度</li>
        <li>行内元素只能容纳文本或其他行内元素</li>
        <li>注意点1：链接里面不能再放链接</li>
        <li>注意点2：特殊情况 a里面可以放块元素</li>
        <li>注意点3：h1-h6标签主要存放文字，里面也不能出现其他块元素</li>
    </ul>
</body>

</html>